/**
*@author weixiaodi
*@date 2019/10/21
*/
<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-house"></i><span style="margin-left: 10px">房间信息</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin: 20px;"></div>

        <div class="container" >
            <div>
                <el-row :gutter="0"  class="el-row">
                    <el-col :span="1"><div class="sgrid-content bg-empty" ></div></el-col>
                    <el-col :span="2"><div class="text">空房</div></el-col>
                    <el-col :span="1"><div class="sgrid-content bg-full"></div></el-col>
                    <el-col :span="2"><div class="text">住人</div></el-col>
                    <el-col :span="1"><div class="sgrid-content bg-clean"></div></el-col>
                    <el-col :span="2"><div class="text">打扫</div></el-col>
                    <el-col :span="1"><div class="sgrid-content bg-book"></div></el-col>
                    <el-col :span="2"><div class="text">预定</div></el-col>
                    <el-button type="primary" plain style="margin-left: 10px; float: right" @click="datefilter">选择日期</el-button>
                    <el-date-picker
                            style="float: right"
                            v-model="value1"
                            type="date"
                            placeholder="选择日期"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="timestamp">
                    </el-date-picker>

                </el-row>


                <el-row :gutter="20">
                    <el-col
                            :span="4"
                            v-for="(room,index) in dateArray"
                            :key="index">
                        <div :class="room.status" >
                            {{room.roomId}}
                        </div>
                    </el-col>
                </el-row>

            </div>
        </div>

    </div>
</template>

<script>


    import { requestRoom } from '../../../api';
    export default {
        data() {
            return {
                type: '',
                rooms: [],
                value1:new Date().getTime(),
                dateArray:[],
            }
            },
        created(){
            let this_ = this;
            this.check().then(()=>{
                this_.datefilter();//先执行check后再执行datefilter
            });

        },

        methods: {
            /*获取roomInfo表中数据*/
            async check(){
                const res = await requestRoom().catch(()=>'error')
                if("error"!==res){
                    //console.log(res)
                    this.rooms = res.map(function(item) {
                        let roomStatus = item.roomStatus;
                        let status;
                        switch (roomStatus) {
                            case 0:
                                status = "grid-content bg-book";
                                break;
                            case 1:
                                status = "grid-content bg-empty";
                                break;
                            case 2:
                                status = "grid-content bg-full";
                                break;
                            case 3:
                                status = "grid-content bg-clean";
                                break;
                        }
                        item["status"] = status;
                        return item;
                    });
                }
            },

            /*根据日期筛选房间*/
            datefilter(){
                //console.log(parseInt(this.value1/1000))
                this.dateArray=this.rooms.filter((item)=>
                    parseInt(item.checkInTime) <= parseInt(this.value1/1000) &&
                    parseInt(this.value1/1000) <= parseInt(item.checkOutTime)
                )
                //console.log(this.dateArray)
            },
        }
    };
</script>

<style>
    .el-row {
        margin-bottom: 40px;
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-empty{
        background: #07C4A8;
    }
    .bg-full {
        background: #008080;
    }
    .bg-clean {
        background: #DAA520;
    }
    .bg-book{
        background: #BEBEBE;
    }
    .grid-content {
        border-radius: 4px;
        height: 70px;
        padding: 10px;
        text-align: center;
        color: #FFFFFF;
        font-size: 27px;
        line-height: 70px;
        margin-bottom: 20px;
    }
    .sgrid-content {
        height: 35px;
        width: 35px;
        border-radius: 4px;
        text-align: center;
        color: #FFFFFF;
    }
    .text{
        height: 35px;
        width: 40px;
        margin-left: 5px;
        color: #000000;
        line-height: 35px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>
